// src/routes/index.tsx
import React, { Suspense } from "react"
import { BrowserRouter as Router, Route, Routes } from "react-router-dom"
import HomePage from "../pages/HomePage"
import Adv from "../pages/Adv"
import Layout from "../components/Layout"
import KnowledgeLayout from "../pages/Knowledge/components/KnowledgeLayout"
import KnowledgeListPage from "../pages/Knowledge/KnowledgeListPage"

import ReactKownledgeDetail from "../pages/Knowledge/reactKnowledge/ReactKownledgeDetail"
import ReactKnowledgeListPage from "../pages/Knowledge/reactKnowledge"

const CssKnowledgeListPage = React.lazy(
  () => import("../pages/Knowledge/cssKnowledge")
)

const CssKownledgeDetail = React.lazy(
  () => import("../pages/Knowledge/cssKnowledge/CssKownledgeDetail")
)

const AppRoutes: React.FC = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<HomePage />} />
          <Route path="knowledge" element={<KnowledgeLayout />}>
            <Route index element={<KnowledgeListPage />} />
            <Route path="react" element={<ReactKnowledgeListPage />} />
            <Route path="react/:topicId" element={<ReactKownledgeDetail />} />

            <Route
              path="css"
              element={
                <Suspense fallback={<div>Loading...</div>}>
                  <CssKnowledgeListPage />
                </Suspense>
              }
            />
            <Route
              path="css/:topicId"
              element={
                <Suspense fallback={<div>Loading...</div>}>
                  <CssKownledgeDetail />
                </Suspense>
              }
            />
          </Route>
          <Route path="adv" element={<Adv />} />
        </Route>
        {/* 你可以在这里添加更多的路由 */}
      </Routes>
    </Router>
  )
}

export default AppRoutes
